<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:f="http://java.sun.com/jsf/core" 
		xmlns:c="http://java.sun.com/jstl/core" 
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:a4j="http://richfaces.org/a4j"
		xmlns:rich="http://richfaces.org/rich"
		xmlns:fn="http://www.bss.com/functions">
		
	
	
	<style>
		.patientPanelCls {
			/*height:300px;*/
			border:0px;
		}
		.cls11 {
			/*width:50%;*/
		}
		td {
				vertical-align: top;
			}
			
	</style>
	
	<a4j:jsFunction name="#{loadClickedImageFunction}" reRender="imgctrl22" limitToList="true"/>
		
		<h:panelGrid columns="2" width="100%" columnClasses="cls11">
					
					<rich:panel styleClass="patientPanelCls" style="border:0px;">
						<f:facet name="header">
							<h:outputText value="Basic Details" />
						</f:facet>
						<h:panelGrid columns="2">		
							<h:panelGroup>	
								<h:outputLabel value="First Name" />
								<h:outputLabel value="*" styleClass="requiredAtr" />
								<h:outputLabel value=":" />
							</h:panelGroup>
							<h:inputText value="#{model.firstName}"/>
							<h:outputLabel value="Middle Name:" />
							<h:inputText value="#{model.middleName}"/>
							<h:panelGroup>	
								<h:outputLabel value="Last Name" />
								<h:outputLabel value="*" styleClass="requiredAtr" />
								<h:outputLabel value=":" />
							</h:panelGroup>							
							<h:inputText value="#{model.lastName}"/>
							<h:panelGroup>	
								<h:outputLabel value="Gender" />
								<h:outputLabel value="*" styleClass="requiredAtr" />
								<h:outputLabel value=":" />
							</h:panelGroup>	
							<h:selectOneRadio value="#{model.sex}">
								<f:selectItem itemLabel="Male" itemValue="M"/>
								<f:selectItem itemLabel="Female" itemValue="F"/>
							</h:selectOneRadio>
							<h:panelGroup>	
								<h:outputLabel value="Religion" />
								<h:outputLabel value="*" styleClass="requiredAtr" />
								<h:outputLabel value=":" />
							</h:panelGroup>
							<rich:comboBox	value="#{model.religion}"
															suggestionValues="#{religionDao.all}"
															converter="#{religionConverter}"
															enableManualInput="true"/>		
							<h:panelGroup>	
								<h:outputLabel value="Date of Birth" />
								<h:outputLabel value="*" styleClass="requiredAtr" />
								<h:outputLabel value=":" />
							</h:panelGroup>
							<rich:calendar inputSize="10" id="calDOB" enableManualInput="true" 
									oninputblur="if(!validateDate($('calDOBInputDate').value)){alert('Entered date '+$('calDOBInputDate').value+' is not valid !\nChanging to current date !');$('calDOBInputDate').value='#{utils.today}'}"
							value="#{model.dateOfBirth}" datePattern="dd/MM/yyyy"/>							
							<h:outputLabel value="Address:" />
							<h:panelGrid columns="2">
								<h:panelGroup>	
									<h:outputLabel value="House/Flat/Building:" />
									<h:outputLabel value="*" styleClass="requiredAtr" />
									<h:outputLabel value=":" />
								</h:panelGroup>
								<h:inputText value="#{model.addressLine1}"/>
								<h:outputLabel value="Street/Mohalla/Thana:" /><h:inputText value="#{model.addressLine2}"/>
								<h:panelGroup>	
									<h:outputLabel value="Country" />
									<h:outputLabel value="*" styleClass="requiredAtr" />
									<h:outputLabel value=":" />
								</h:panelGroup>
								<h:panelGrid columns="2">
									<rich:comboBox value="#{model.country}" width="100"
															suggestionValues="#{countrySuggestions}"
															converter="#{countryConverter}" 
															enableManualInput="true">
																<a4j:support ajaxSingle="true" limitToList="true" action="#{controller[countryChangeAction]}" event="onchange" reRender="cStates,sPlaces,idPanel1,idPanel2,idPanel3"/>
															</rich:comboBox>
									<h:commandButton value="+"  action="#{controller.addNewPlace}"  />
								</h:panelGrid>
								<h:panelGroup>	
									<h:outputLabel value="State"/>
									<h:outputLabel value="*" styleClass="requiredAtr" />
									<h:outputLabel value=":" />
								</h:panelGroup>	
								<h:panelGrid columns="2">
									<rich:comboBox	value="#{model.state}" id="cStates" width="100"
															suggestionValues="#{stateSuggestions}"
															converter="#{stateConverter}"
															enableManualInput="true">
																<a4j:support ajaxSingle="true" limitToList="true" event="onchange" reRender="sPlaces" action="#{controller[stateChangeAction]}"/>
															</rich:comboBox>
									<h:commandButton value="+"  action="#{controller.addNewPlace}"  />	
								</h:panelGrid>
								<h:panelGroup>	
									<h:outputLabel value="Place"/>
									<h:outputLabel value="*" styleClass="requiredAtr" />
									<h:outputLabel value=":" />
								</h:panelGroup>	
								<h:panelGrid columns="2">
									<rich:comboBox	value="#{model.place}" id="sPlaces" width="100"
															suggestionValues="#{placeSuggestions}"
															converter="#{placeConverter}"
															enableManualInput="true"/>
									<h:commandButton value="+" action="#{controller.addNewPlace}"  />
								</h:panelGrid>
								<h:outputLabel value="Pin: " /><h:inputText value="#{model.pin}" size="10"/>
							</h:panelGrid>															
							<h:panelGroup>	
								<h:outputLabel value="ID Card Type" />
								<h:outputLabel value="*" styleClass="requiredAtr" />
								<h:outputLabel value=":" />
							</h:panelGroup>
							<h:panelGroup id="idPanel3">
								<h:outputText rendered="#{controller.passportRelated}" value="#{model.idCardType}"  converter="#{idCardTypeConverter}"/>
								<rich:comboBox rendered="#{not controller.passportRelated}" value="#{model.idCardType}" 
															suggestionValues="#{idCardTypeDao.all}"
															converter="#{idCardTypeConverter}" enableManualInput="true">
									<a4j:support ajaxSingle="true" event="onchange" limitToList="true" reRender="idPanel1,idPanel2"/>
								</rich:comboBox>							
							</h:panelGroup>
							<h:panelGroup id="idPanel1">
								<h:panelGroup rendered="#{model.idCardType.name ne 'Passport'}" >	
									<h:outputLabel value="ID Card Number:" />
									<h:outputLabel value="*" styleClass="requiredAtr" />
									<h:outputLabel value=":" />
								</h:panelGroup>
								<h:outputLabel rendered="#{model.idCardType.name eq 'Passport'}" value="Passport Data:" />
							</h:panelGroup>
							<h:panelGroup id="idPanel2">								
								<h:inputText style="display:#{model.idCardType.name ne 'Passport' ? 'block':'none'}" value="#{model.idCardNumber}"/>
								<h:panelGrid style="display:#{model.idCardType.name eq 'Passport' ? 'block':'none'}" columns="2" >
									<h:panelGroup>	
										<h:outputLabel value="Number" />
										<h:outputLabel value="*" styleClass="requiredAtr" />
										<h:outputLabel value=":" />
									</h:panelGroup>									
									<h:inputText value="#{model.passport.passportNumber}" size="10"/>									
									<h:panelGroup>	
										<h:outputLabel value="Date of issue" />
										<h:outputLabel value="*" styleClass="requiredAtr" />
										<h:outputLabel value=":" />
									</h:panelGroup>	
									<rich:calendar  inputSize="10" enableManualInput="false" 
																					value="#{model.passport.dateOfIssue}" datePattern="dd/MM/yyyy">
																					
																			</rich:calendar>	
									<h:panelGroup>	
										<h:outputLabel value="Date of expiry" />
										<h:outputLabel value="*" styleClass="requiredAtr" />
										<h:outputLabel value=":" />
									</h:panelGroup>	
									<rich:calendar  inputSize="10" enableManualInput="false" 
																					value="#{model.passport.dateOfExpiry}" datePattern="dd/MM/yyyy">
																					
																			</rich:calendar>
								</h:panelGrid>
							</h:panelGroup>
							<h:panelGroup>	
								<h:outputLabel value="Phone Number"/>
								<h:outputLabel value="*" styleClass="requiredAtr" />
								<h:outputLabel value=":" />
							</h:panelGroup>	
							
							<h:inputText value="#{model.phone}"/>
							
							<h:panelGroup>	
								<h:outputLabel value="Profession" />
								<h:outputLabel value="*" styleClass="requiredAtr" />
								<h:outputLabel value=":" />
							</h:panelGroup>	
							<rich:comboBox	value="#{model.profession}"
															suggestionValues="#{professionDao.all}"
															converter="#{professionConverter}"
															enableManualInput="true"/>									
						</h:panelGrid>

						<h:panelGroup rendered="#{showAddUpdateCancel}">
							<div class="buttonGroup" style="text-align: center;">
								<h:commandButton disabled="#{editing}" id="submit" action="#{controller['add']}" value="Add" style="padding-right:10px;"/>
								<h:commandButton disabled="#{!editing}" action="#{controller['update']}" value="Update" style="padding-right:10px;"/>
								<h:commandButton value="Cancel" action="#{controller['cancel']}" style="padding-right:10px;"/>
							</div>	
						</h:panelGroup>	
					</rich:panel>
				
					<rich:panel styleClass="patientPanelCls" style="border:0px;">
						<f:facet name="header">
							<h:outputText value="Photograph" />
						</f:facet>
						<h:panelGrid columns="1">
							<h:commandLink rendered="${not editing}" value="Click" onclick="launchChildW(); return false;"/>
							<h:outputLink onclick="launchChildW(); return false;">							
								<h:graphicImage id="imgctrl22" style="border: thin solid gray" width="240px" height="180px" url="#{ not empty imageController.patientService.imageData ? fn:concat('/bss/images/clicked2?dummy=',admissionController.random)  :'/images/no-photo.gif' }"/>
							</h:outputLink>
						</h:panelGrid>												
					</rich:panel>
					
					
					
				</h:panelGrid>
				
						<rich:dataTable rendered="#{showData}" value="#{data}" var="aBean" align="center">
							<f:facet name="header">
								<h:outputText value="All Patients"/>
							</f:facet>
							<rich:column>
								<f:facet name="header">
									<h:outputText value="Edit" />
								</f:facet>							
								<h:commandButton title="#{editing ? 'Edit already in progress...':'Click to Edit'}" image="/resrc/images/edit1.jpg" disabled="#{editing}" 
								style="width:15px;height:15px;#{editing ? 'cursor: not-allowed':''}" action="#{controller['select']}"/>
							</rich:column>
							<rich:column>
								<f:facet name="header">
									<h:outputText value="Delete"/>
								</f:facet>							
								<h:commandButton title="#{editing  ? 'Edit is in progress, please complete the editing...':'Click to Delete'}" image="/resrc/images/cross1.jpg" 
									style="width:15px;height:15px;#{editing? 'cursor: not-allowed':''}" 
									disabled="#{editing}" immediate="true"  action="#{controller['delete']}"
									onclick="if(!showConfirmation('Are you sure to remove Patient #{aBean.firstName} #{aBean.middleName} #{aBean.lastName} ?')) return false;"/>
							</rich:column>
							<rich:column>
								<f:facet name="header">Name</f:facet>
								<h:outputText value="#{aBean.lastName}, #{aBean.firstName} #{aBean.middleName} "/>
							</rich:column>
							<rich:column style="text-align:center" rendered="false" >
								<f:facet  name="header">Photograph</f:facet>
								<h:graphicImage width="50" height="37" url="/bss/images/saved?id=#{aBean.id}"
									onmouseout="hideLarge()" style="border-width: 1px; border-style:solid; border-color:black;"
									onmouseover="showLarge(event,this,'#{request.contextPath}/bss/images/saved?id=#{aBean.id}');"/>
							</rich:column>												

								<f:facet name="footer">
									<h:outputText rendered="#{data.rowCount le 0}" value="No Patients available..." />
									<h:outputText rendered="#{data.rowCount gt 0}" value="#{data.rowCount} Patients found..." />
								</f:facet>
						</rich:dataTable>				
					
				
		<img id="imageEnlarged" src="" width="320" height="240" 
				alt="No Image" style="position:absolute; visibility: hidden; border-width: 2px; border-style:solid; border-color:red;"/>
				
	
	</ui:composition>	

